/**
 * Created by Ysssssss on 2021/5/4.
 */


import React, { PureComponent } from 'react'
import PropTypes from 'prop-types';
import { Row, Col } from 'antd'
import ParamsInput from "@common/presentational/ParamsInput";

class TitleModule extends PureComponent {
    static propTypes = {
        titleInfo: PropTypes.object,
        index: PropTypes.number,
        onChange: PropTypes.func
    }

    editSubmit (value) {
        const { onChange, index, titleInfo } = this.props
        onChange && onChange(index, {
            ...titleInfo,
            name: value,
        })
    }

    render () {
        const { titleInfo } = this.props

        return (
            <div className="operation-container ft-clr-d">
                <div className="ft-16 pdb-16 bdb-l">标题文本</div>
                <div className="mgt-24">
                    <Row>
                        <Col span={6}>标题文案：</Col>
                        <Col span={18}>
                            <ParamsInput value={titleInfo.name} onChange={this.editSubmit.bind(this)}/>
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}

export class TitlePreview extends PureComponent {
    static propTypes = {
        titleInfo: PropTypes.object,
        onClick: PropTypes.func,
        className: PropTypes.string,
    }

    render () {
        const { onClick, titleInfo, className } = this.props

        return (
            <div className={`title-preview cur-poi ${className}`} onClick={onClick}>
                { titleInfo.name }
            </div>
        )
    }
}

export default TitleModule